import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import { Form, Row, Col, Input, Button, Icon, Table } from 'antd';
import 'antd/dist/antd.css';

const FormItem = Form.Item;

class PCBody extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
        	pagination: 10
        }
    }
    render() {

			const columns = [{
			  title: '提货单编号',
			  dataIndex: 'orderId',
			  key: 'orderId',
			  width: '10%',
			}, {
			  title: '商品名称',
			  dataIndex: 'tradeName',
			  key: 'tradeName',
			  width: '10%',
			}, {
			  title: '地域',
			  dataIndex: 'address',
			  key: 'address',
			  width: '10%'
			}, {
			  title: '商家',
			  dataIndex: 'list1',
			  key: 'list1',
			  width: '10%'
			}, {
			  title: '位置',
			  dataIndex: 'list2',
			  key: 'list2',
			  width: '10%'
			}, {
			  title: '提货量',
			  dataIndex: 'list3',
			  key: 'list3',
			  width: '10%'
			}, {
			  title: '分配量',
			  dataIndex: 'list4',
			  key: 'list4',
			  width: '10%'
			}, {
			  title: '交货日期',
			  dataIndex: 'list5',
			  key: 'list5',
			  width: '10%'
			}, {
			  title: '提货单状态',
			  dataIndex: 'list6',
			  key: 'list6',
			  width: '10%'
			}];

			const data = [{
			  key: 1,
			  orderId: 'T99',
			  tradeName: 60,
			  address: '中国',
			  list1: '十足',
			  list2: '老家',
			  list3: 1111,
			  list4: 50,
			  list5: "2017-10-2",
			  list6: "已确认",
			  children: [{
			    key: 11,
			    orderId: 'T101',
			    tradeName: 42,
			    address: '中国',
			    list1: '十足',
			    list2: '老家',
			    list3: 1111,
			    list4: 50,
			    list5: "2017-10-2",
			    list6: "已确认",
			  }, {
			    key: 12,
			    orderId: 'T101',
			    tradeName: 30,
			    address: '中国',
			    list1: '十足',
			    list2: '老家',
			    list3: 1111,
			    list4: 50,
			    list5: "2017-10-2",
			    list6: "已确认",
			  }, {
			    key: 13,
			    orderId: 'T101',
			    tradeName: 72,
			    address: '中国',
			    list1: '十足',
			    list2: '老家',
			    list3: 1111,
			    list4: 50,
			    list5: "2017-10-2",
			    list6: "已确认",
			  }],
			}];

			let baseData ;

			for(var i = 0; i < 30; i++){

				baseData = {
				  key: 21+i,
				  orderId: 'T10'+i,
				  tradeName: 32,
				  address: '中国',
				  list1: '十足',
				  list2: '老家',
				  list3: 1111,
				  list4: 50,
				  list5: "2017-10-2",
				  list6: "未确认",
				};
				data.push(baseData);
			}


			// rowSelection objects indicates the need for row selection
			const rowSelection = {
			  onChange: (selectedRowKeys, selectedRows) => {
			    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
			  },
			  onSelect: (record, selected, selectedRows) => {
			    console.log(record, selected, selectedRows);
			  },
			  onSelectAll: (selected, selectedRows, changeRows) => {
			    console.log(selected, selectedRows, changeRows);
			  },
			};
        return (
          <div className="PcBody">
		        <Row>
		        	<Col span={22}>
			          <div class="head">
			            <Button type="primary" htmlType="submit">确认提货</Button>
			            <Button type="primary" htmlType="submit">提货分配</Button>
			            <Button type="default" htmlType="submit">取消分配</Button>
			          </div>
		        	</Col>
		        	<Col span={2}></Col>
		        </Row>
		        <Row>
		        	<Col span={24}>
		        		<Table columns={columns} rowSelection={rowSelection} dataSource={data} pagination={{ pageSize: 5 }} />
		        	</Col>
		        </Row>
          </div>
        )
    }
}







export default Form.create()(PCBody);